<template>
  <div>
    <Header class="header-fixed" />
    <VerticalNav class="vertical-nav-fixed" />
    <div class="user-edit-container">
      <div class="profile-center">
        <div class="form-inner">
          <div class="block">
            <div class="block-header">
              <span>个人信息设置</span>
            </div>
            <div class="block-body">
              <el-form :model="user" label-width="100px">
                <el-form-item label="用户ID">
                  <el-input v-model="user.user_id" disabled />
                </el-form-item>
                <el-form-item label="用户名">
                  <el-input v-model="user.username" disabled />
                </el-form-item>
                <el-form-item label="昵称">
                  <el-input v-model="user.nick_name" placeholder="请输入昵称" />
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input v-model="user.phone" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="user.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="状态">
                  <el-tag :type="user.status === '0' ? 'success' : 'danger'">
                    {{ user.status === '0' ? '正常' : '禁用' }}
                  </el-tag>
                </el-form-item>
                <el-form-item label="创建时间">
                  <el-input v-model="user.create_time" disabled />
                </el-form-item>
                <el-form-item label="头像">
                  <el-upload
                    class="avatar-uploader"
                    action="/api/upload/avatar"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                  >
                    <img v-if="user.avatar" :src="user.avatar" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="save">保存</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import Header from './Header.vue'
import Footer from './Footer.vue'
import VerticalNav from './VerticalNav.vue'

const user = ref({
  user_id: '',
  username: '',
  nick_name: '',
  phone: '',
  email: '',
  avatar: '',
  status: '',
  create_time: ''
})

onMounted(() => {
  const userInfoStr = localStorage.getItem('userInfo')
  if (userInfoStr) {
    try {
      const userInfo = JSON.parse(userInfoStr)
      Object.assign(user.value, userInfo)
    } catch (e) {
      console.error('用户信息解析失败', e)
    }
  } else {
    // 兼容只存了 userName/userAvatar 的情况
    const name = localStorage.getItem('userName')
    const avatar = localStorage.getItem('userAvatar')
    console.log(name, avatar)
    if (name) user.value.username = name
    if (avatar) user.value.avatar = avatar
  }
})

const handleAvatarSuccess = (response) => {
  user.value.avatar = response.url // 根据实际返回字段调整
}

const save = () => {
  // 提交保存逻辑
  sessionStorage.setItem('userName', user.value.username);
  sessionStorage.setItem('userAvatar', user.value.avatar);
  console.log(sessionStorage)
}

const reset = () => {
  // 重置逻辑
}
</script>

<style scoped>
:root {
  --nav-width: 220px;
}
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.vertical-nav-fixed {
  position: fixed;
  top: 60px; /* Header高度 */
  left: 0;
  width: var(--nav-width);
  height: calc(100vh - 60px);
  z-index: 999;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.03);
  border-right: 1px solid #f0f0f0;
}
.user-edit-container {
  margin-top: 60px;      /* Header高度 */
  margin-left: var(--nav-width);
  padding: 40px 0;
  min-height: calc(100vh - 60px);
  background: #f5f5f5;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.profile-center {
  width: 1000px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 32px 48px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.form-inner {
  max-width: 400px;
  margin: 0 auto;
}
.block-header {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 24px;
}
.avatar-uploader {
  display: flex;
  align-items: center;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 16px;
}
.avatar-uploader-icon {
  font-size: 32px;
  color: #8c939d;
}
</style>